<template>
  <!-- 首页组件 -->
  <div class="container">
    <!-- 文章分类栏 -->
    <van-tabs animated swipeable v-model="activeIndex">
      <van-tab
        :key="channel.id"
        v-for="channel in channels"
        :title="channel.name"
      >
        <!-- 可滚动内容区域 -->
        <ArticleList :channelId="channel.id" />
      </van-tab>
    </van-tabs>
    <!-- 右侧图标 -->
    <span class="bar_btn" @click="showEditChannel = true">
      <van-icon name="wap-nav"></van-icon>
    </span>
    <!-- 频道管理 -->
    <channel-edit
      v-model="showEditChannel"
      :myChannels="channels"
      :activeIndex.sync="activeIndex"
    />
  </div>
</template>

<script>
import { getMyChannels } from '@/api/channel'
// 文章列表
import ArticleList from './articleList'
// 频道管理
import ChannelEdit from './components/channel-edit'
export default {
  name: 'home-index',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      // 用户频道
      channels: [],
      // 显示频道管理
      showEditChannel: false,
      // 当前激活频道的索引
      activeIndex: 0
    }
  },
  // 处理refresh_token失效，回跳缓存不刷新问题
  // watch: {
  //   '$store.state.user.refresh_token' () {
  //     console.log('refresh111')
  //     this.getUserChannels()
  //   }
  // },
  // 被缓存组件再次被打开时执行
  // activated () {
  //   console.log('被缓存组件再次被打开时执行')
  //   // this.$refs['alist' + this.activeIndex] && this.$refs['alist' + this.activeIndex][0].scrollList()
  //   this.changeTab(this.activeIndex)
  // },
  created () {
    this.getUserChannels()
    // this.request
    //   .get('announcements', {
    //     params: {
    //       id: 10
    //     }
    //   })
    //   .then(res => {
    //     console.log(res)
    //   })
    // 删除用户搜索历史
    // this.request.delete('search/histories').then(res => {
    //   console.log(res)
    // })
  },
  methods: {
    // 获取登录用户的频道列表
    async getUserChannels () {
      const { status, data } = await getMyChannels()
      if (status === 200) {
        this.channels = data.channels
      }
    }
    // 切换标签栏
    // changeTab (i) {
    //   // this.activeIndex = i
    //   // console.log(i, this.$refs.alist[i])
    //   this.$refs['alist' + i] && this.$refs['alist' + i][0].scrollList()
    // }

  }
}
</script>

<style scoped lang='less'>
.van-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  // 自定义tab样式
  /deep/ .van-tabs__wrap {
    height: 36px;
    padding-right: 36px;
    .van-tab {
      line-height: 36px;
    }
    .van-tabs__line {
      background-color: #fc6627;
      height: 2px;
    }
  }
  /deep/ .van-tabs__content {
    flex: 1;
    overflow: hidden;
  }
  /deep/ .van-tab__pane {
    height: 100%;
    .scroll-wrapper {
      height: 100%;
      overflow-y: auto;
    }
  }
}
.bar_btn {
  width: 36px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  box-shadow: -6px -6px 8px #ddd;
  // &::before {
  //   content: "";
  //   width: 100%;
  //   height: 100%;
  //   position: absolute;
  //   z-index: 999;
  //   box-shadow: 0 0 10px #999;
  //   transform: scale(1, 0.6);
  // }
  // .van-icon-wap-nav {
  //   width: 100%;
  //   height: 100%;
  //   background: #fff;
  //   text-align: center;
  //   line-height: 35px;
  //   position: relative;
  //   z-index: 1000;
  //   &::before {
  //     font-size: 20px;
  //   }
  // }
}
</style>
